Wesbos - Variable CSS

---

---

로직

스크롤 → 해당 라벨의 이동값 선택 → 해당 값이 css variable에 적용 → 뒤에 suffix값 붙여넣기

---

CSS의 변수화

👉 CSS에서의 Variable control은 이하와 같이 표현

:root {
	--속성 : 값
};

//:root는 최상위 엘리먼트를 의미한다. (HTML)

---

setProperty()

👉 설정, 2개의 인자 (속성,값)

document.documentElement.style.setProperty(속성, 값);

---

documentElement

👉 html 안의 모든 요소를 말한다

최종 코드

---

const inputs = document.querySelectorAll('.controls input');

function handleUpdate() {
  const suffix = this.dataset.sizing || '';
  document.documentElement.style.setProperty(
    `--${this.name}`,
    this.value + suffix
  );
}

inputs.forEach((input) => input.addEventListener('change', handleUpdate));
inputs.forEach((input) => input.addEventListener('mousemove', handleUpdate));

font-family: 'helvetica neue', sans-serif;

---